<template>
	<view class="study-con">
		<view class="study-top">
			<view class="over-circular" >
				<view class="tui-circular-progress">
					<tui-circular-progress 
					progressColor="#0089ce" 
					fontColor="#191919" 
					:percentage="info.success_scale" 
					:diam="150" 
					:lineWidth="12"
					fontSize="30rpx"
					:counterclockwise="true"
					>
					</tui-circular-progress>
				</view>
				<view class="circular-progress">
					<text >{{info.success_scale}}<text style="font-size: 15rpx;">%</text></text>
					<text>考试通过率</text>
				</view>
				
			</view>
			
			<view class="study-top-bom">
				<view>
					<text>{{info.last_score}}</text>
					<text>最新成绩（分）</text>
				</view>
				<view>
					<text>{{info.jige_num}}</text>
					<text>及格次数（次）</text>
				</view>
				<view>
					<text>{{info.total_num}}</text>
					<text>考试次数（次）</text>
				</view>
			</view>
		</view>
		
		<view style="height: 20rpx;background-color: #EFEFEF;width: 100%;"></view>
		<view style="margin-top: 20px;">
			<tui-tabs :tabs="tabs" :currentTab="currentTab" itemWidth="50%" @change="tabschange" ></tui-tabs>
		</view>
		<view style="height: 50rpx;"></view>
		<u-empty v-if="list==''"
				mode="list"
				icon="https://shuati26.kptedu.com/uploads/image/wushuati.png"
				text="您还没有考试记录,快去考试吧"
				textColor="#666"
				width="300rpx"
				height="300rpx"
		>
		</u-empty>
		<view v-else class="exam-tabs-list" v-for="(item,index) in list" :key="index"  @click="goto_detail(item)">
			<view class="exam-tabs-list-title" >
				{{item.date}}
			</view>
			<view class="exam-tabs-list-bom" >
				<view>
					【{{item.subject_name}}】
					<text style="letter-spacing: 1px;">{{item.exam_name}}</text>
				</view>
				<view>
					成绩&nbsp;{{item.score}}分
				</view>
			</view>
		</view>
		
		
			
	</view>
</template>

<script>
	import tuiCircularProgress from "@/components/thorui/tui-circular-progress/tui-circular-progress"
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
	export default {
		data() {
			return {
				list:[],
				tabs: [{
					name: "模拟考试"
				}, {
					name: "阶段测评"
				}, {
					name: "考试真题"
				}],
				currentTab:0,
				info:{},
				type:'',
			}
		},
		components:{
			tuiCircularProgress,
			tuiTabs,
		},
		onLoad(){
			this.get_record();
			this.get_recordInfo();
			
			
			if(this.currentTab==0){
				this.type=2
			}else if(this.currentTab==1){
				this.type=3
			}else if(this.currentTab==2){
				this.type=1
			}
		},
		methods: {
			tabschange(e){
				this.currentTab = e.index
				if(this.currentTab==0){
					this.type=2
				}else if(this.currentTab==1){
					this.type=3
				}else if(this.currentTab==2){
					this.type=1
				}
				this.get_record();
				this.get_recordInfo();
			},
			async get_record() {
			   let res = await this.$myHttp.post({
			        url: this.$myHttp.urlMap.record,
			        data: {
						   province:uni.getStorageSync('choose_cityName'),
						   type:this.type,
						   page:1,
						   limit:4,
			        },
			        needLogin: true
			    })
			    if (res.code == 1) {
					   this.list=res.data.list
					 
			    }
			},
			async get_recordInfo() {
			   let res = await this.$myHttp.post({
			        url: this.$myHttp.urlMap.recordInfo,
			        data: {
						   province:uni.getStorageSync('choose_cityName'),
						   type:this.type,
			        },
			        needLogin: true
			    })
			    if (res.code == 1) {
					this.info=res.data.info
				 
			    }
			},
			goto_detail(item) {
			    this.showModal = !this.showModal
			    this.$openrul('/pages/examination/examOver/indexf/indexf?id=' + item.id  )
			},
		}
	}
</script>

<style>
.study-con{
	display:flex;
	flex-flow: column wrap;
}
.study-top{
	
}
.study-top-bom{
	width:93%;
	margin:0 auto;
	border-radius:20rpx;
	background:#fff;
	background-color: #F7F8FA;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	height: 160rpx;
	margin-bottom: 40rpx;
	
}
.study-top-bom>view{
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	
}
.study-top-bom>view>text:nth-child(1){
	font-size: 40rpx;
	font-weight: 500;
}
.study-top-bom>view>text:nth-child(2){
	color: #9C9C9C;
	font-size: 27rpx;
	
}
/**/
.over-circular{
	
	margin: 30rpx auto 30rpx;
}
 .tui-circular-progress{
	 display: flex;
	 justify-content: center;
	 align-items: center;
 }
 
 .circular-progress{
	     position: absolute;
	     top: 110rpx;
	left: 320rpx;
		 display: flex;
	 flex-flow: column wrap;
	 justify-content: center;
	 align-items: center;
 }
 .circular-progress>text:nth-child(1){
	 font-size: 70rpx;
	 font-weight: 700;
	 
 }
.circular-progress>text:nth-child(2){
	     font-size: 25rpx;
	     color: #9c9c9c;
 }
 /**/
.exam-tabs-list{
		display: flex;
		    flex-flow: column wrap;
		    width: 92%;
		    height: 100rpx;
		    
		    margin: auto;
		
	}
	.exam-tabs-list-title{
		font-size: 22rpx;
		    color: #9c9c9c;
	}
	.exam-tabs-list-bom{
			font-size: 35rpx;
			    display: flex;
			    align-items: center;
			    flex-flow: row nowrap;
			    /* margin-top: 20rpx; */
			    color: #000000;
			    width: 100%;
			    justify-content: space-between;
			
	}
	.exam-tabs-list-bom>view:nth-child(1){
		   width: 70%;
		       font-size: 26rpx;
		       font-weight: 400;
		       display: flex;
		       align-items: center;
		       flex-flow: row nowrap;
	}
	.exam-tabs-list-bom>view:nth-child(2){
		   display: flex;
		       justify-content: center;
		       padding: 10rpx;
		       width: 18%;
		       height: 35rpx;
		       background-color: #EFEFEF;
		       color: #9C9C9C;
		       align-items: center;
		       font-size: 25rpx;
		       border-radius: 50rpx;
		}
</style>
